<template>
    <h3>日志配置管理</h3>
    <div class="contents">
        <el-row :gutter="10">
            <el-col :span="6">
                <!-- 配置项分组 -->
                <configGroup @config="getConfigItem"></configGroup>
            </el-col>
            <el-col :span="18">
                <!-- 配置内容分组 -->
                <el-row v-if="configure_list.length > 0" v-for="(item, index) in configure_list" class="right-item"
                    :key="index">
                    <el-col :span="6">{{ item.name_cn }}</el-col>
                    <el-col :span="17">
                        <!-- 开关配置项 -->
                        <el-switch :value="item.value_bool == 1" v-show="item.types == 'bool'" active-color="#13ce66"
                            @change="switchItem(item)" inactive-color="#ff4949">
                        </el-switch>
                        <el-input v-model="item.value_string" placeholder="请输入内容" @blur="setString(item)"
                            v-show="item.types == 'string'"></el-input>
                        <el-input v-model="item.value_int" placeholder="请输入内容" v-show="item.types == 'int'"
                            @blur="setString(item)" type="number" step="1"></el-input>
                        <el-input v-model="item.value_float" placeholder="请输入内容" v-show="item.types == 'float'"
                            @blur="setString(item)" type="number" step="0.000001"></el-input>
                    </el-col>
                    <el-col :span="1">
                        <el-tooltip 
                            effect="light"
                            placement="left-end"
                            trigger="click"
                            raw-content>
                            <template #content> 
                                配置项KEY：{{ item.name_key }}<br />
                                配置项类型：{{ item.types }}<br />
                                配置项描述：{{ item.desc }}
                            </template>
                            <el-icon><ChatDotSquare /></el-icon>
                        </el-tooltip>
                    </el-col>
                </el-row>
                <el-row>
                    <el-empty v-if="configure_list.length <= 0" description="暂未找到配置项" style="margin: 0 auto"></el-empty>
                </el-row>
            </el-col>
        </el-row>
    </div>
</template>
<script>
import configGroup from './_config-group.vue';
export default {
    components: {
        configGroup
    },
    data() {
        return {
            configure_list: [],
        }
    },
    methods: {
        // 菜单点击事件
        getConfigItem(key) {
            console.log("点击菜单", key)
            var that = this
            // 获取该分组的配置详情信息
            that.$axios.get("api:config/get.configure", { params: { keys: key } }).then(res => {
                that.configure_list = res.data
            })
        },
        // 字符串/int/float类型配置
        setString(item) {
            // item.value_int = parseInt(item.value_int)
            // item.value_float = parseFloat(item.value_float)
            this.$axios.post("api:config/set.configure", item)
        },
        // 开关切换事件
        switchItem(item) {
            if (item.value_bool == 1) {
                item.value_bool = 0
            } else {
                item.value_bool = 1
            }
            this.$axios.post("api:config/set.configure", item)
        },
    },
}
</script>
<style lang="less" scoped>
.right-item {
    height: 40px;
    line-height: 40px;
    margin-bottom: 5px;
}
</style>